/*
 * @Author: mayijun
 * @Date: 2022-05-14 11:12:52
 * @LastEditors: mayijun
 * @LastEditTime: 2022-06-29 17:20:26
 */
//枚举类型标签组件
import { defineComponent, reactive, watch } from 'vue';
import './index.scss';
import { RemoveFilled } from '@element-plus/icons-vue';
import { ElIcon, ElInput, ElOption, ElSelect } from 'element-plus';
import { useStore } from '@/store';
import API from '@/services';

const EnumTag = defineComponent({
  name: 'EnumTag',
  components: {
    RemoveFilled
  },
  props: {
    tagData: {
      type: Object,
      default: () => ({})
    },
    parentNode: {
      type: Object,
      default: () => ({})
    },
  },
  emits: ['removeNode'],
  setup: (props, { slots, attrs, emit }) => {

    const store = useStore();

    let state = reactive({
      dialogVisible: false,
      textOptions: [] as any[]
    });

    // 获取文本型操作枚举
    const getTextOptions = async () => {
      const { code, data } = await API.enumBao.getComparisonEnum({
        type: 'TEXT'
      });
      if (code === 200 && Array.isArray(data)) {
        state.textOptions = data.filter(item=>item.value != 'like' && item.value != 'not like');
      } else {
        console.log('获取logicalOptions失败');
      }
    }

    //删除节点
    const removeNode = (tagData: any, parentNode: any) => {
      emit('removeNode', tagData, parentNode);
    }

    watch(state.textOptions, (val: any) => {
      if (!val || val.length === 0) {
        getTextOptions();
      }
    }, {
      immediate: true
    });

    return () => {
      return (
        <div class="restrict-tag-enum-wrap">
          <div class="tag-item tag-label">
            <div class="label-dis-wrap">{props.tagData.cnName}</div>
            <span class="remove-icon-wrap" onClick={() => { removeNode(props.tagData, props.parentNode) }}>
              <ElIcon><RemoveFilled /></ElIcon>
            </span>
          </div>
          <div class="tag-operator">
            <ElSelect v-model={props.tagData.operator} placeholder="请选择" size="large">
              {state.textOptions.map((item: any) => (
                <ElOption
                  key={item.value}
                  label={item.label}
                  value={item.value}
                >
                  <span style="float: left">{item.label}</span>
                </ElOption>
              ))}
            </ElSelect>
          </div>
          <div class="tag-input">
            <ElInput size="large" v-model={props.tagData.value[0]} placeholder="输入枚举内容“,”隔开" />
          </div>
        </div>
      );
    };
  }
});

export default EnumTag;
